    <template>

        <div class="news-item-category-list">
          <!-- 搜索筛选 -->
          <el-form :inline="true" :model="searchModel" class="user-search">
            <el-form-item label="搜索：">
              <el-input size="small" v-model="searchModel.name" placeholder="输入栏目名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
              <el-button size="small" type="primary" icon="el-icon-plus" @click="editRow(-1,{})">添加</el-button>
            </el-form-item>
          </el-form>


          <!--列表-->
          <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
                    style="width: 100%;">


<!--
            <el-table-column  prop="isActive" label="是否发布" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.isActive"><el-checkbox checked ></el-checkbox></div>
                <div v-else><el-checkbox></el-checkbox></div>
              </template>
            </el-table-column>
-->



            <el-table-column  prop="name" label="栏目名称" width="300">
            </el-table-column>
            <el-table-column  prop="parentId" label="上一级编号" width="200">
            </el-table-column>

            <el-table-column  prop="updatedAt" label="最后更新时间" width="200">
              <template slot-scope="scope">
                <div>{{scope.row.updatedAt|timestampToTime}}</div>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作" min-width="200">
              <template slot-scope="scope">

                <el-button size="mini" type="primary" @click="editRow(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>

              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

        </div>
    </template>

<script>
    import axios from "axios"
    import Pagination from '../../components/Pagination'
    import {cmsApi} from "../../api/baseApi";

    export default {
        name: 'NewsItemCategoryList',
        componentName: 'NewsItemCategoryList',
        components: {
            Pagination
        },
        props: {
            isMainListLoading:false,
        },
        data() {

            return {
                isRefreshGrid:this.isMainListLoading,
                loading: false, //是显示加载
                searchModel: {
                    pageIndex:1,
                    pageSize:10,
                    name:"",
                    pageName:""
                },
                listData: [], //用户数据
                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 10
                },

            };
        },
        methods:{
            getList() {
                this.loading = true
                this.isRefreshGrid = false;
                axios.post(cmsApi+"news-item-category/list",this.searchModel)
                    .then(res => {
                        this.loading = false
                        if (res.data.code !=1) {
                            this.$message({
                                type: 'info',
                                message: res.message
                            })
                        } else {
                            this.listData = res.data.data.records;
                            console.log(res.data.data);
                            // 分页赋值
                            this.pageparm.currentPage = this.searchModel.pageIndex;
                            this.pageparm.pageSize = this.searchModel.pageSize;
                            this.pageparm.total = res.data.data.total;
                        }
                    })
                    .catch(err => {
                        this.loading = false
                        this.$message.error('菜单加载失败，请稍后再试！')
                    })
            },

            editRow(index,row){
                this.$emit('onRowEditClick',row)
            },
            // 删除公司
            deleteUser(index, row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        axios.delete(cmsApi+"news-item-category/"+row.id,this.editForm)
                            .then(res=>{
                                this.loading = false;
                                this.isRefreshGrid = true;
                            }).catch(err=>{
                            this.loading = false
                            this.$message.error('公司保存失败，请稍后再试！')
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            },
            // 分页插件事件
            callFather(parm) {
                this.searchModel.pageIndex = parm.currentPage;
                this.searchModel.pageSize = parm.pageSize;
                this.isRefreshGrid = true;
            },

        },
        watch: {
            isMainListLoading:{
                handler:function(val){
                    if(val){
                        this.isRefreshGrid = true;
                    }
                }
            },
            isRefreshGrid: {
                handler:function(val){
                    if(val){
                        this.getList();
                    }
                    else{
                        this.$emit('setMainLoadingFalse');
                    }
                }
            }
        },
        created() {
            this.getList();
        }
    };
</script>

    <style scoped>
      .user-search {
        margin-top: 20px;
      }
      .userRole {
        width: 100%;
      }
    </style>

